<template>
    <div class="follow _sign">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>微信关注签到</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <div class="sign-box">
                <h5 class="hint">温馨提示:请直接点击复制按钮,勿手动复制</h5>
                <div class="sign-item"><span>公众号名称 :wx_name</span>
                    <el-button type="danger" round size="small" @click="copyUrl(':wx_name')">点击复制</el-button>
                </div>
                <div class="sign-item"><span>用户名称 :user_name</span>
                    <el-button type="danger" round size="small" @click="copyUrl(':user_name')">点击复制</el-button>
                </div>
                <div class="sign-item"><span>上次阅读历史 :last_read</span>
                    <el-button type="danger" round size="small" @click="copyUrl(':last_read')">点击复制</el-button>
                </div>
                <div class="sign-item"><span>签到信息 :sign_info</span>
                    <el-button type="danger" round size="small" @click="copyUrl(':sign_info')">点击复制</el-button>
                </div>
                <h5 class="hint">注意事项:</h5>
                <p>编辑内容时，注意格式，使用关键词时，不可出现错误，否则原样展示。</p>
                <p>使用表情时，指定位置，点击标签栏表情按钮，出现表情选择框，点击即可。</p>
                <p>设置推荐书籍或漫画时，输入书籍漫画名称后选中，点击标签栏插入链接按钮，输入链接（最好使用推广链接）确定即可。</p>
                <p>使用链接时注意，确定渠道ID，否则点击链接后跳转非本渠道地址。</p>
            </div>
        </el-card>
        <el-card>
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <el-tab-pane label="关注" name="first">
                    <div id="div1"></div>
                </el-tab-pane>
                <el-tab-pane label="签到" name="second">
                    <div id="div2"></div>
                </el-tab-pane>
            </el-tabs>
            <div style="margin-top: 20px">
                <el-button type="primary" @click="save">保存</el-button>
            </div>
        </el-card>
    </div>
</template>

<script>
  import Editor from "wangeditor";
  // import editor from '../../components/kindeditor.vue'
  export default {
    name: "EditorElem",
    // components:{editor},
    data() {
      return {
        activeName: 'first',
        editorContent1: '',
        editorContent2: '',
        editorText: '直接初始化值', // 双向同步的变量
        editorTextCopy: ''  // content-change 事件回掉改变的对象
      }
    },
    created() {
    },
    mounted() {
      this.getData();
    },
    methods: {
      getData() {
        this.$axios.post("admin/wechat_official/get_event_msg").then((res) => {
          this.editorContent1 = this.replaceN(res.data.attention);
          this.editorContent2 = this.replaceN(res.data.sign);
          this.createEdit1();
          this.createEdit2();
        });
      },
      copyUrl(data) {
        let url = data;
        let oInput = document.createElement('input');
        oInput.value = url;
        document.body.appendChild(oInput);
        oInput.select(); // 选择对象;
        console.log(oInput.value);
        document.execCommand("Copy"); // 执行浏览器复制命令
        this.$message.success("复制成功");
        oInput.remove()
      },
      handleClick() {

      },
      createEdit1() {
        let editor = new Editor("#div1");
        console.log(this.editorContent1);
        editor.customConfig.onchange = html => {
          this.editorContent1 = editor.txt.html();
        };
        editor.customConfig.menus = [
          // "head", // 标题
          // "bold", // 粗体
          // "fontSize", // 字号
          // "fontName", // 字体
          // "italic", // 斜体
          // "underline", // 下划线
          // "strikeThrough", // 删除线
          // "foreColor", // 文字颜色
          // "backColor", // 背景颜色
          "link", // 插入链接
          // "list", // 列表
          // "justify", // 对齐方式
          // "quote", // 引用
          "emoticon", // 表情
          // "image", // 插入图片
          // "table", // 表格
          // "video", // 插入视频
          // "code", // 插入代码
          // "undo", // 撤销
          // "redo" // 重复
        ];
        editor.customConfig.emotions = [
          {
            // tab 的标题
            title: '默认',
            // type -> 'emoji' / 'image'
            type: 'emoji',
            // content -> 数组
            content: ['😀', '😃', '😄', '😁', '😆', '😂', '😭', '😏', '😥', '😺', '😸', '😹', '😽', '😻', '😿', '😾', '😼', '🙅']
          }
        ];
        editor.create();
        editor.txt.html(this.editorContent1);
        //想获取文本编译框内的html，可以添加事件获取
      },
      createEdit2() {
        let editor = new Editor("#div2");
        editor.customConfig.onchange = html => {
          this.editorContent2 = editor.txt.html();
        };
        editor.customConfig.menus = [
          // "head", // 标题
          // "bold", // 粗体
          // "fontSize", // 字号
          // "fontName", // 字体
          // "italic", // 斜体
          // "underline", // 下划线
          // "strikeThrough", // 删除线
          // "foreColor", // 文字颜色
          // "backColor", // 背景颜色
          "link", // 插入链接
          // "list", // 列表
          // "justify", // 对齐方式
          // "quote", // 引用
          "emoticon", // 表情
          // "image", // 插入图片
          // "table", // 表格
          // "video", // 插入视频
          // "code", // 插入代码
          // "undo", // 撤销
          // "redo" // 重复
        ];
        editor.customConfig.emotions = [
          {
            // tab 的标题
            title: '默认',
            // type -> 'emoji' / 'image'
            type: 'emoji',
            // content -> 数组
            content: ['😀', '😃', '😄', '😁', '😆', '😂', '😭', '😏', '😥', '😺', '😸', '😹', '😽', '😻', '😿', '😾', '😼', '🙅']
          }
        ];
        editor.create();
        editor.txt.html(this.editorContent2);
        //想获取文本编译框内的html，可以添加事件获取
      },
      save() {
        console.log(this.editorContent1);
        let form = {
          attention: this.replacePhtml(this.editorContent1),
          sign: this.replacePhtml(this.editorContent2),
        };
        this.$axios.post("admin/wechat_official/set_event_msg", {config: form}).then((res) => {
          this.$message.success("设置成功");
          this.getData();
        });
      },
      replacePhtml(str) {
        var s = '';
        s = str.replace(/<\/?p[^>]*>/gi, '\n');
        s = s.replace('<div>', '\n');
        return s
      },
      replaceN(str) {
        return str.replace(/\n/g, '<br>')
      }
    }
  }
</script>

<style scoped lang="less">

    .sign-box {
        width: 100%;
        background: #F5F8FD;
        padding-left: 10px;
        box-sizing: border-box;
        padding-bottom: 10px;

        .hint {
            line-height: 60px;
            color: #333333;
        }

        .sign-item {
            display: flex;
            flex-wrap: wrap;
            height: 40px;
            align-items: center;

            span {
                padding-right: 20px;
            }
        }

        p {
            line-height: 30px;
        }
    }
</style>